<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/js/Grid/css/grid.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/Grid/js/grid.js"></script>
    <script>
        window.addEventListener("message", evt => {
            var data = evt.data;
            table = data.table;
            loadGrid();
        });
    </script>
    <style>
        #grid td span[data-name='name']:hover,
        #grid td span[data-name='typeString']:hover,
        #grid td span[data-name='desc']:hover,
        #grid td span[data-name='isNullAble']:hover,
        #grid td span[data-name='identityInfo']:hover,
        #grid td span[data-name='default']:hover,
        #grid td span[data-name='isUnique']:hover {
            border: 1px solid #bfbdbd;
            padding: 3px;
        }
    </style>
</head>

<body>
    <div id="grid"></div>
    <script>
        var table;
        $(function () {
            initColumnsGrid();
        });
        var data;
        var gridColumns;
        function initColumnsGrid() {
            gridColumns = new Grid("grid", {
                isFixHead: true,
                sizeColumn: true,
                height: 100,
                isPage: false,
                colWidths: [
                    30, 100, 100, 150, 150, 100, 100, 100, 100, 100
                ],
                headArr: [
                    [
                        { text: "序号" },
                        { text: "列名", order: { type: "none", name: "name", rank: 1 } },
                        { text: "类型" },
                        { text: "说明" },
                        { text: "编码" },
                        { text: "?可空" },
                        { text: "自增" },
                        { text: "默认值" },
                        { text: "?唯一" },
                        { text: "计算列信息" }
                    ]
                ],
                columnArr: [
                    { type: "index" },
                    {
                        type: "lab", name: "name", formatter: function (col, tdconf) {
                            if (col.isPrimaryKey) {
                                return `<font color='red' title='主键'>${col.name}</font>`;
                            } else {
                                return col.name;
                            }
                        }, dblClick: function (text, data, tr, div) {
                            var newName = window.prompt("请输入列名称:", data.name);
                            console.log(arguments);
                            if (newName == null) {
                                //取消编辑
                                return;
                            }
                            var name = data.name;
                            var tableName = table;
                            showLoading();
                            $.post("/api/mysqlmanage/UpdateColumnName", { oldName: name, newName, tableName }).done(res => {
                                if (res.success) {
                                    if (data.isPrimaryKey) {
                                        div.html(`<font color='red' title='主键'>${newName}</font>`);
                                    } else {
                                        div.html(newName);
                                    }
                                    data.name = newName;
                                } else {
                                    alert(res.message);
                                }
                            }).always(hideLoading);
                        }
                    },
                    {
                        type: "lab", name: "typeString", dblClick: function (text, data, tr, div) {
                            var typeString = window.prompt("请输入列类型:", data.typeString);
                            console.log(arguments);
                            if (typeString == null) {
                                //取消编辑
                                return;
                            }
                            var name = data.name;
                            var tableName = table;
                            showLoading();
                            $.post("/api/mysqlmanage/UpdateColumnType", { name, tableName, typeString }).done(res => {
                                if (res.success) {
                                    div.html(typeString);
                                    data.typeString = typeString;
                                } else {
                                    alert(res.message);
                                }
                            }).always(hideLoading);
                        }
                    },                    
                    {
                        type: "lab", name: "desc", cutLen: 15, title: "desc", dblClick: function (text, data, tr, div) {
                            var desc = window.prompt("请输入列说明:", data.desc);
                            console.log(arguments);
                            if (desc == null) {
                                //取消编辑
                                return;
                            }
                            var name = data.name;
                            var tableName = table;
                            showLoading();
                            $.post("/api/mysqlmanage/UpdateColumnDescription", { name, tableName, desc }).done(res => {
                                if (res.success) {
                                    div.html(desc);
                                    data.desc = desc;
                                } else {
                                    alert(res.message);
                                }
                            }).always(hideLoading);
                        }
                    },
                    { type: "lab", name: "collatioN_NAME", title: "collatioN_NAME" },
                    {
                        type: "lab", name: "isNullAble", formatter: function (col, tdconf) {
                            if (col.isNullAble) {
                                return "true";
                            } else {
                                return `<font color='red'>false</font>`;
                            }
                        }, dblClick: function (text, data, tr, div) {
                            var isNullAble = window.prompt("请指定是否可空(0:不可,1:可空):", data.isNullAble ? "1" : "0");
                            console.log(arguments);
                            if (isNullAble == null) {
                                //取消编辑
                                return;
                            }
                            var name = data.name;
                            var tableName = table;
                            showLoading();
                            $.post("/api/mysqlmanage/UpdateColumnNullAble", { name, tableName, isNullAble }).done(res => {
                                if (res.success) {
                                    data.isNullAble = isNullAble;
                                    if (data.isNullAble == "1") {
                                        div.html("true");
                                    } else {
                                        div.html(`<font color='red'>false</font>`);
                                    }
                                } else {
                                    alert(res.message);
                                }
                            }).always(hideLoading);
                        }
                    },
                    {
                        type: "lab", name: "identityInfo", dblClick: function (text, data, tr, div) {
                            var identity = window.prompt("请指定是否自增(0:不自增,1:自增):", data.identityInfo ? "1" : "0");
                            console.log(arguments);
                            if (identity == null) {
                                //取消编辑
                                return;
                            }
                            var name = data.name;
                            var tableName = table;
                            showLoading();
                            $.post("/api/mysqlmanage/UpdateColumnIdentity", { name, tableName, identity }).done(res => {
                                if (res.success) {
                                    data.identityInfo = identity == "1" ? true : false;
                                    if (identity == "1") {
                                        div.html("true");
                                    } else {
                                        div.html('');
                                    }
                                } else {
                                    alert(res.message);
                                }
                            }).always(hideLoading);
                        }
                    },
                    { type: "lab", name: "default" },
                    {
                        type: "lab", name: "isUnique", formatter: function (col, tdconf) {
                            if (col.isUnique) {
                                return "true";
                            } else {
                                return `<font color='red'>false</font>`;
                            }
                        }, dblClick: function (text, data, tr, div) {
                            return;
                            var isUnique = window.prompt("请指定是否唯一(0:不唯一,1:唯一):", data.isUnique ? "1" : "0");
                            console.log(arguments);
                            if (isUnique == null) {
                                //取消编辑
                                return;
                            }
                            var name = data.name;
                            var tableName = table;
                            showLoading();
                            $.post("/api/mysqlmanage/UpdateColumnUnique", { name, tableName, isUnique }).done(res => {
                                if (res.success) {
                                    data.isUnique = isUnique == "1" ? true : false;
                                    if (isUnique == "1") {
                                        div.html("true");
                                    } else {
                                        div.html(`<font color='red'>false</font>`);
                                    }
                                } else {
                                    alert(res.message);
                                }
                            }).always(hideLoading);
                        }
                    },
                    { type: "lab", name: "computedInfo", title: "computedInfo" },
                ],
                onQuery: function (pageIndex, pageSize, orders) {
                    if (orders.length > 0) {
                        initColumns(orders);
                    }
                }
            });
            gridColumns.init({ data: [] });
        }
        function initColumns(orders) {
            var columns = data.columns.map(col => {
                if (col.isIdentity) {
                    col.identityInfo = `true`;
                }
                if (col.isComputed) {
                    col.computedInfo = `${col.isPersisted ? "持久化;" : ""} ${col.computedDefinition}`;
                }
                return col;
            });
            columns = gridColumns.order(columns, orders);
            gridColumns.init({ data: columns });
            var height = document.body.clientHeight - 10 - 35 - 40;
            gridColumns.setHeight(height + "px");
        }
        function loadGrid() {
            showLoading();
            $.post("/api/mysqlmanage/GetTableDetail", { table }, function (res) {
                data = res.data;
                initColumns();
            }).always(hideLoading);
        }
    </script>
</body>

</html>